<template>
    <div class="databaseDb-error-container">

        <!-- 搜索框 -->
        <div class="filter-container" style>
            <!-- large, medium, small, mini -->

            <el-input
            clearable
            size="medium"
            v-model="listQuery.search"
            :placeholder="typeName"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="fetchData"
            >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

            <!-- <el-date-picker
            class="filter-item"
            size="medium"
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker> -->

            <el-date-picker
            class="filter-item"
            size="medium"
            v-model="time[0]"
            type="datetime"
            placeholder="开始时间"
            :picker-options="pickerOptions0"
            >
            </el-date-picker>

            <el-date-picker
            class="filter-item"
            size="medium"
            v-model="time[1]"
            type="datetime"
            placeholder="结束时间"
            :picker-options="pickerOptions1"
            >
            </el-date-picker>
            
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                size="medium"
                icon="el-icon-search"
                @click="fetchData"
            >搜索</el-button>

            <!-- 类型选择 -->
            <div class="filter-item" style="margin-left: 50px;display: inline-block;">
                <el-radio-group v-model="listQuery.sqlType" size="mini" @change="changeType">

                    <template v-for="item in radioList">
                        <el-radio-button :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                    </template>

                </el-radio-group>
            </div>

        </div>

        <!-- 表格 -->
        <!-- :header-cell-style="{background:'#f1f1f1'}" -->
        <el-table
            :show-header="true"
            height="250"
            v-loading="listLoading"
            :data="list"
            fit
            highlight-current-row
            style="width: 100%;flex-grow: 1;overflow: auto;"
            @current-change="handleCurrentChange"
        >
            <el-table-column align="center" label="ID" width="80">
                <template slot-scope="scope">{{ scope.$index+1 }}</template>
            </el-table-column>

            <!-- 应用名称	分类	名称	创建时间	忽略不显示	挂起时间	忽略不显示	错误信息 -->

            <el-table-column width="160px" align="center" label="应用名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.ApplicationName }}</span>
                </template>
            </el-table-column>

            <el-table-column width="120px" align="center" label="分类">
                <template slot-scope="scope">
                    <span>{{ scope.row.Type }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="接口名称">
                <template slot-scope="scope">
                    <span v-if="scope.row.Orchestration">{{ scope.row.Orchestration ? scope.row.Orchestration : '-' }}</span>
                    <span v-if="scope.row.SendPort">{{ scope.row.SendPort ? scope.row.SendPort : '-' }}</span>
                    <span v-if="scope.row.ReceivePort">{{ scope.row.ReceivePort ? scope.row.ReceivePort : '-' }}</span>
                </template>
            </el-table-column>

            <el-table-column width="160px" align="center" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.dtCreated | formatStrTime('yyyy-MM-dd hh:mm') }}</span>
                </template>
            </el-table-column>

            <el-table-column width="160px" align="center" label="挂起时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.dtSuspendTimeStamp | formatStrTime('yyyy-MM-dd hh:mm') }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="错误信息" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.nvcErrorDescription }}</span>
                </template>
            </el-table-column>

            <el-table-column width="120px" align="center" label="错误ID">
                <template slot-scope="scope">
                    <span>{{ scope.row.nvcErrorID }}</span>
                </template>
            </el-table-column>

            <el-table-column width="120px" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary" 
                    plain
                    @click="showDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            
        </el-table>

        <!-- 详情 -->
        <el-dialog title="详情" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-position="left">

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="应用名称:" >
                                {{ form.ApplicationName }}
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="分类:" >
                                {{ form.Type }}
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="接口名称:" >
                                <!-- {{ form.Orchestration ? form.Orchestration : '-' }} -->
                                <template v-if="form.Orchestration">{{ form.Orchestration ? form.Orchestration : '-' }}</template>
                                <template v-if="form.SendPort">{{ form.SendPort ? form.SendPort : '-' }}</template>
                                <template v-if="form.ReceivePort">{{ form.ReceivePort ? form.ReceivePort : '-' }}</template>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="创建时间:" >
                                {{ form.dtCreated | formatStrTime('yyyy-MM-dd hh:mm') }}
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="挂起时间:" >
                                {{ form.dtSuspendTimeStamp | formatStrTime('yyyy-MM-dd hh:mm') }}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- InsertionStrings/Message -->
                    <div contenteditable="false" class="cls-textarea" v-html="form.nvcErrorDescription">
                        <!-- {{ form.nvcErrorDescription }} -->
                    </div>
                </el-row>
                
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div> -->
        </el-dialog>

        <!-- 分页 -->
        <pagination
            v-show="total>=0"
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="fetchData"
        />
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
// import { mapGetters } from 'vuex'
import waves from "@/directive/waves/index.js"; // 水波纹指令
// import elDragDialog from '@/directive/el-drag-dialog' //拖动 base on element-ui
import { getList, getDbLogList } from "@/api/windows";
import { formatStrTime, parseTime } from '@/utils/dateUtil+8h'

export default {
    name: "DbError",
    components: {
        Pagination
    },
    directives: {
        waves
        // elDragDialog// 拖动
    },
    filters: {
        formatStrTime,
        parseTime,
        statusFilter(status) {
            const statusMap = {
                0: "info",
                1: "danger",
                2: "success"
            };
            return statusMap[status];
        }
    },
    computed: {
        typeName: vm => {
            return vm.radioList[vm.listQuery.sqlType - 1].label;
        }
    },
    data() {
        return {
            pickerOptions0: {
                disabledDate: (curtime) => {
                    // debugger;
                    // console.log(this.time[0]);
                    // return curtime.getTime() > Date.now() - 8.64e6
                    let this_ = this;
                    // return curtime.getTime() > new Date(this_.time[1]) - 8.64e6
                    if(this_.time[1]){
                        return curtime.getTime() > new Date(this_.time[1])
                    }
                    return false
                }
            },
            pickerOptions1: {
                disabledDate: (curtime) => {
                    // debugger;
                    // console.log(this.time[0]);
                    // return curtime.getTime() > Date.now() - 8.64e6
                    let this_ = this;
                    // return curtime.getTime() <  new Date(this_.time[0]) - 8.64e6
                    if(this_.time[0]){
                        return curtime.getTime() < new Date(this_.time[0]) - 24 * 60 * 60 * 1000 + 1000
                    }
                    return false
                }
            },
            list: null,
            // 数据总条数
            total: 0,
            listLoading: true,
            // 分页信息
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: "+id",
                location: "",
                dbType: '1',
                sqlType: '1',
                search: '',
                startTime: '',
                endTime: ''
            },
            time: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            currentRow: null,
            // sqlType: '1',
            radioList:[
                {
                    label:'流程',
                    value:'1'
                },{
                    label:'发送端口',
                    value:'2'
                },{
                    label:'接受端口',
                    value:'3'
                },{
                    label:'其它',
                    value:'4'
                },
            ],
            // ******************************** 详情弹窗S ********************************
            dialogFormVisible: false,
            form: {
                ApplicationName: '',
                SendPort: '',
                Type: '',
                dtCreated: '',
                dtSuspendTimeStamp: '',
                nvcErrorDescription: '',
                nvcErrorID: '',
                uidInstanceID: ''
            },
            formLabelWidth: '120px'
            // ******************************** 详情弹窗E ********************************
        };
    },
    // computed: {
    //   ...mapGetters([
    //     'name',
    //     "locations"
    //   ])
    // },
    created() {
        this.listQuery.dbType = this.$route.meta.dbType;// 数据库选择
        console.log("TCL: created -> this.$route.meta.dbType", this.$route.meta.dbType)
        this.fetchData();
    },
    methods: {
        /**
         * 请求后台数据
         */
        fetchData() {
            this.listLoading = true;
            if(this.time != null && this.time.length > 0){
                this.listQuery.startTime = this.time[0];
                this.listQuery.endTime = this.time[1];
            }else{
                this.listQuery.startTime = '';
                this.listQuery.endTime = ''
            }
            console.log("TCL: fetchData -> this.listQuery", this.listQuery)
            getDbLogList(this.listQuery).then(response => {
            // getList(this.listQuery).then(response => {
                // 分页信息
                let pageInfo = response.data;
                // 总数
                this.total = pageInfo.total;
                // 分页数据
                this.list = pageInfo.list;
                this.listLoading = false;
            });
        },
        /**
         * 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
         */
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        /**
         * TAB标签切换event
         */
        changeType(label){
            // debugger;
            this.listQuery.sqlType = label;
            this.fetchData();
        },
        showDetail(row){
            console.log("TCL: showDetail -> row", row)
            this.dialogFormVisible = true;
            this.form = row;
        },
        replaceAll(str){
            return str.replace(/\/n/g,"</br>")
        }
    }
};
</script>

<style lang="scss" scoped>
.databaseDb-error {
    &-container {
        padding: 5px;
        // margin: 30px;
        // background-color: #f0f2f5;
        // height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
.databaseDb-error-container {
    
}
</style>

<style lang="scss">
.databaseDb-error-container {
    
    .btn-show{
        color: #3a8ee6;
    }
    .btn-show:hover{
        color: #3a8ee6c2;
        text-decoration: underline;
    }

    .cls-textarea{
        background-color: #f5f7fa;
        border: none;
        /* width: 400px; */
        min-height: 260px;
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
        outline: 0;
        /* border: 1px solid #a0b3d6; */
        // font-size: 12px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px;
    }
    
}
.el-tooltip__popper{
    max-width: 35%;
}
</style>